<template>
	<div class="software">

		<div class="soft-list">
			<h2>常用软件下载</h2>
			<ul class="soft-list-text">
				<li v-for="soft in softwars">
					<img :src="soft[0]" />
					<p class="source">
						<a>{{soft[1]}}</a>
						<br/><a v-on:click="opensoft($event,soft[2])"  :data-href="soft[2]">百度云链接</a>
					</p>
					<p class="soft-audio">
						<a v-on:click="openaudio($event,soft[3])" :data-href="soft[3]">观看安装视频</a>
					</p>
				</li>

			</ul>
			<div class="soft-divi-page">
				<el-pagination
				  @current-change="softCurrentChange"
				  :current-page="currentPage"
				  background
				  layout="prev, pager, next"
				  :page-size="9"
				  :total="allpage">
				</el-pagination>
				{{msg}}
			</div>
		</div>
		
	</div>
</template>

<script>
	export default{

		name:'Book',
		mounted(){
  		this.swipS()
    	},
		data(){
			return {

				 Active:false,

				 softwars:[],
				 allpage:'',


				}

		},
		methods:{
	    	swipS(){
	    		let self = this;
	    		if(this.page==undefined){
	    			this.page =1;
	    		}

					this.$http({
						method:'get',
						url:'SoftWares/',
						headers:{
							'Content-Type':'application/x-www-form-urlencoded'
						},
						params:{

							Page:self.page,
						}
					}).then((response)=>{
							self.softwars = response.data[0];
							self.allpage = response.data[1];

					})
	    	},
	    	openaudio(event,url){
	    		window.open(url);
	    	},
	    	opensoft(event,url){
	    		window.open(url);
	    	},
		    softCurrentChange(val){
		    	this.currentPage = val;
	    		let Page = this.currentPage;
	    		let self = this;
	    		console.log(this.currentPage)
	    		if(Page==undefined){
	    			Page =1;
	    		}

	    		this.$http({
					method:'get',
					url:'SoftWares/',
					headers:{
						'Content-Type':'application/x-www-form-urlencoded'
					},
					params:{
						Page:Page
					}
				}).then((response)=>{
			      	self.softwars = response.data[0];
					self.allpage = response.data[1];
				})
		    }
        }
	}
</script>

<style>
	button:focus{
		outline: none;
	}
	.soft-divi-page{
		height: 60px;
	}
    .more-vadio{
    	background: #e79c28;
    	border-radius: 15px 15px;
    	color: white;
    	border: none;
    	width: 180px;
    	height: 28px;
    	font-size: 12px;
    }
	.software h2{
		font-weight: normal;
		width: 100%;
		text-align: left;
		padding-left: 30px;
		margin-bottom: 20px;
		color:black;
	}
	.software{
		width: 100%;
		text-align: center;
		background: #f7f5f6;
		position: relative;
		top: 80px;
		min-height: 300px;
	}
	.soft-list{
		display: inline-block;
		width: 80%;
		padding-top: 20px;
	}
	.soft-list .soft-list-text{

		padding: 0;
		list-style: none;
	}
	.soft-list .soft-list-text li{
		position: relative;
		display: inline-block;
		width: 100%;
		height: 250px;
		box-shadow: 2px 2px 5px #e7e5e6;
	
		margin-top: 10px;
	}
	.soft-list img{
		width: 100%;
		height: 200px;
	}

	.soft-list ul li p{
		font-size: 12px;
	 width: 100%;
	}
	.source,.soft-audio{
		position:absolute;

	}
	.source{

		color: white;
		height: 200px;
		top:70px;
	}
	.source a{
		text-decoration: none;
		color: white;
		cursor: pointer;
	}

	.soft-audio a{
		color: black;
		text-decoration: none;
			cursor: pointer;
	}
</style>
